<script setup>
defineProps({
  content: { type: String, default: () => '' },
  effect: { type: String, default: () => 'light' },
  placement: { type: String, default: () => 'top' },
  name: { type: String, default: () => '' },
  popperClass: { type: String, default: () => '' },
});
const disabled = ref(false);
const textOverflow = element => {
  const range = document.createRange();
  range.setStart(element, 0);
  range.setEnd(element, element.childNodes.length);
  const rangeWidth = range.getBoundingClientRect().width;
  const computed = window.getComputedStyle(element);
  const padding = (parseInt(computed.paddingLeft, 10) || 0) + (parseInt(computed.paddingRight, 10) || 0);
  return rangeWidth + padding > element.offsetWidth || element.scrollWidth > element.offsetWidth;
};
const handleMouseenter = e => {
  disabled.value = !textOverflow(e.target.parentNode);
};
</script>

<template>
  <el-tooltip
    :disabled="disabled"
    :content="content"
    :effect="effect"
    :placement="placement"
    :popper-class="`u-tooltip ${popperClass}`"
  >
    <span class="j-tooltip" :class="name" ref="content" @mouseenter="handleMouseenter">{{ content }}</span>
  </el-tooltip>
</template>

<style lang="scss" scoped>
.j-tooltip {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  // font-size: 20px;
}
</style>
